<template>
	<view class="con">
		<view class="item">
			<view class="title">请填写个人身份信息</view>
			<view class="it">
				<view class="name">姓名</view>
				<input type="text" v-model="idName" placeholder="填写真实姓名" placeholder-style="color:#999;font-size: 26rpx;"/>
			</view>
			<view class="it">
				<view class="name">身份证号码</view>
				<input type="text" v-model="idNumber" placeholder="请填写身份证号" placeholder-style="color:#999;font-size: 26rpx;"/>
			</view>
			<view class="it" @click="upsimg">
				<view class="name">上传身份证正面（国徽面）</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
			<!-- 正面照 -->
			<image :src="idnumberFrontImg" mode="" v-if="idnumberFrontImg!=null"></image>
			<view class="it" @click="upbimg">
				<view class="name">上传身份证反面（头像面）</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
			<!-- 反面照 -->
			<image :src="idnumberAfterImg" mode="" v-if="idnumberAfterImg!=null"></image>
			<view class="it" @click="value=true">
				<view class="name">所在社区</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
			<view>{{city}}</view>
			<view class="it">
				<view class="name">疾病过往史</view>
				<view class="sex">
					<view class="sexit" :class="{'active':gflag==1}" @click="activeFn1(1)">有</view>
					<view class="sexit" :class="{'active':gflag==2}" @click="activeFn1(2)">无</view>
				</view>
			</view>
			<view class="it" @click="jbshow=true" v-if="gflag==1">
				<view class="name">选择疾病</view>
				<u-icon name="arrow-right" color="#999" size="32"></u-icon>
			</view>
			<input type="text" v-model="detailed" placeholder="如果未找到疾病,可手动填写" placeholder-style="font-size: 28rpx" v-if="gflag==1"/>
		</view>
		<view class="remarks">备注：身份一旦上传审核成功将不得修改，请谨慎选择！</view>
		<view class="btn" @click="submit">
			完成
		</view>
		<jb  v-model="jbshow" @jb-change="jbChange" @isshow="jbshow=false"></jb>
		<cityselect  v-model="value" @city-change="cityChange" @isshow="value=false"></cityselect>
	</view>
</template>

<script>
	import jb from"../../../components/jb.vue"
	import cityselect from"../../../components/cityselect.vue"
	import {ygrz} from"../../../api/user.js"
	export default{
		data(){
			return{
				sex:1,//性别
				gflag:0,//过往
				bflag:0,
				nflag:0,
				sflag:0,
				jbshow:false,
				idName:"",//姓名
				idNumber:"",//身份证号码
				idnumberFrontImg:null,//正面
				idnumberAfterImg:null,//反面
				diseaseId:[],//疾病
				detailed:'',//其他疾病
				value:false,
				city:"",
				provinceId:"",
				cityId:"",
				areaId:"",
				streetId:""
			}
		},
		components:{
			cityselect,
			jb
		},
		methods:{
			cityChange(e) {
				// regionId
				this.city = e.province.name + '-' + e.city.name + '-' + e.area.name+ '-' + e.street.name;
				this.provinceId=e.province.regionId
				this.cityId=e.city.regionId
				this.areaId=e.area.regionId
				this.streetId=e.street.regionId
				console.log(e)
				// console.log(this.city)
			},
			async submit(){
				if(!this.$u.test.chinese(this.idName.trim())){
					this.msg("未填写正确的姓名","none")
					return
				}
				if(!this.$u.test.idCard(this.idNumber.trim().toUpperCase())){
					this.msg("未填写正确的身份证号码","none")
					return
				}
				if(this.idnumberFrontImg==null){
					this.msg("未上传身份证正面","none")
					return
				}
				if(this.idnumberAfterImg==null){
					this.msg("未上传身份证反面","none")
					return
				}
				if(this.gflag==1){
					if(this.diseaseId.length==0&&this.detailed.trim()==''){
						this.msg("未选择或者未填写疾病信息","none")
						return
					}
				}
				if(this.provinceId==''){
					this.msg("未选择社区","none")
					return
				}
				let data={
					idName:this.idName,//姓名
					idNumber:this.idNumber,//身份证号码
					idnumberFrontImg:this.idnumberFrontImg,//正面
					idnumberAfterImg:this.idnumberAfterImg,//反面
					userHealthy:{
						diseaseId:this.diseaseId.join(","),//疾病
						detailed:this.detailed,//其他疾病
					},
					provinceId:this.provinceId,//省份
					cityId:this.cityId,//城市
					areaId:this.areaId,//区域
					streetId:this.streetId//街道
				}
				let res=await this.post(ygrz,data)
				this.msg("保存成功，等待后台审核")
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/user/user"
					})
				},1500)
			},
			upsimg(){
				this.upimg((res)=>{
					console.log("正面",res)
					this.idnumberFrontImg=res
				})
			},
			upbimg(){
				this.upimg((res)=>{
					console.log("反面",res)
					this.idnumberAfterImg=res
				})
			},
			jbChange(e) {
				console.log(e)
				this.diseaseId.push(e.twojb.diseaseId)
				console.log(this.diseaseId)
			},
			activeFn(e){
				this.sex=e
			},
			activeFn1(e){
				this.gflag=e
			},
			activeFn2(e){
				this.bflag=e
			},
			activeFn3(e){
				this.nflag=e
			},
			activeFn4(e){
				this.sflag=e
			},
		}
	}
</script>

<style>
	.remarks{
		/* position: fixed; */
		/* bottom: 160rpx; */
		font-size: 20rpx;
		font-weight: bold;
		color: #F09238;
		margin-bottom: 20rpx;
	}
	.btn{
		/* position: fixed; */
		/* bottom: 52rpx; */
		width: 690rpx;
		height: 66rpx;
		background: #F09238;
		opacity: 1;
		border-radius: 48rpx;
		text-align: center;
		line-height: 66rpx;
		color: #FFFFFF;
	}
	.title{
		height: 45rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 45rpx;
		color: #333333;
		opacity: 1;
	}
	.sexit{
		
		border-radius: 4px;
		width: 82rpx;
		height: 38rpx;
		background:  #F0F0F0;
		opacity: 1;
		border-radius: 4rpx;
		text-align: center;
		line-height: 38rpx;
		font-size: 24rpx;
		margin-left: 10rpx;
		color: #999999;
	}
	.active{
		background-color:  #F09238;
		color: #FFFFFF;
	}
	.sex{
		display: flex;
		align-items: center;
	}
	input{
		text-align: right;
	}
	.it{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80rpx;
	}
	.item{
		width: 690rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 10px rgba(149, 149, 149, 0.16);
		opacity: 1;
		border-radius: 8rpx;
		padding: 20rpx;
		margin-bottom: 50rpx;
	}
	.con{
		padding:30rpx;
		
	}
</style>
